import { McpInfo } from '@/typings/mcp';
import { cn } from '@/lib/utils';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

import { ToolsList } from './tools-table';
import { McpPropsSetting } from './mcp-props';

export function McpTabs({ mcp, onSaved }: { mcp?: McpInfo; onSaved?: () => void }) {
  return (
    <Tabs
      defaultValue="mcpprops"
      className={cn(
        'w-full flex flex-col h-full min-h-0',
        'bg-white dark:bg-gray-800 rounded-lg shadow-sm'
      )}
    >
      <TabsList className="flex-shrink-0 bg-gray-100 dark:bg-gray-700 px-2 py-1">
        <TabsTrigger value="mcpprops" className="px-3 py-1.5 text-sm font-medium">
          属性
        </TabsTrigger>
        <TabsTrigger value="prompt" className="px-3 py-1.5 text-sm font-medium">
          提示词
        </TabsTrigger>
        <TabsTrigger value="tool" className="px-3 py-1.5 text-sm font-medium">
          工具
        </TabsTrigger>
        <TabsTrigger value="resource" className="px-3 py-1.5 text-sm font-medium">
          资源
        </TabsTrigger>
      </TabsList>

      {/* 内容区域 */}
      <div className="flex-1 min-h-0">
        <TabsContent value="mcpprops" className={cn('h-full')}>
          <div className="h-full overflow-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-900">
            <McpPropsSetting mcp={mcp} onSaved={onSaved} />
          </div>
        </TabsContent>

        <TabsContent value="prompt" className={cn('h-full')}>
          <div className="h-full overflow-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-900">
            <ToolsList lists={JSON.parse(mcp?.Prompts || '[]')} />
          </div>
        </TabsContent>

        <TabsContent value="tool" className={cn('h-full overflow-hidden')}>
          <div className="h-full overflow-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-900">
            <ToolsList lists={JSON.parse(mcp?.Tools || '[]')} />
          </div>
        </TabsContent>

        <TabsContent value="resource" className={cn('h-full')}>
          <div className="h-full overflow-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-900">
            <ToolsList lists={JSON.parse(mcp?.Ressource || '[]')} />
          </div>
        </TabsContent>
      </div>
    </Tabs>
  );
}
